<template>
  <view class="content">
    <!-- 搜索区域开始 -->
    <view class="search"
          style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;width: 750rpx;">
      <view
          style="background-color: #e3e4e8; display: flex;justify-content: center;align-items: center;width: 624rpx; height: 60rpx; border-radius: 30rpx;">
        <view style="padding-left: 18rpx;">
          <image src="../../static/search.png" style="width: 30rpx;height: 30rpx;"></image>
        </view>
        <view>
          <input v-model="search"
                 style=" width: 440rpx;height: 60rpx;margin-left: 6rpx;font-size: 26rpx;border-radius: 30rpx;padding-left: 4rpx;"
                 placeholder="请输入关键词搜索"/>
        </view>
        <view
            style="display: flex;justify-content: center;align-items: center; border-radius: 25rpx;margin-left: 18rpx;"
            @click="serachEvt">
          <image src="../../static/sicon.png" style="width: 100rpx;height: 50rpx;"></image>
        </view>
      </view>
    </view>
    <!-- 搜索区域结束 -->
    <!-- 操作栏区域 ，开始 -->
    <!--
    <view class="kinds">
      <view class="kinds_item" @click="manUse">
        <view style="width: 84rpx;height: 74rpx;">
          <image src="../../static/man_use.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view>男性用品</view>
      </view>
      <view class="kinds_item" @click="womanUse">
        <view style="width: 84rpx;height: 74rpx;">
          <image src="../../static/woman_use.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view>女性用品</view>
      </view>
      <view class="kinds_item" @click="allUse">
        <view style="width: 84rpx;height: 74rpx;">
          <image src="../../static/all_use.png" style="width: 30rpx;height: 100%;padding-left: 40rpx;">
          </image>
        </view>
        <view>双人情趣</view>
      </view>
      <view class="kinds_item" @click="fushi">
        <view style="width: 84rpx;height: 74rpx;">
          <image src="../../static/fushi.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view>情趣服饰</view>
      </view>
    </view>
    -->
    <!-- 操作栏区域 ，结束 -->
    <!--商品 开始-->
    <view style="display: flex; flex-wrap:wrap;justify-content: space-start; margin-top: 10rpx;">
      <view v-for="(item, index) in goodsList" :key="item.id">
        <view class="goods_item" @click="jumpDetail(item.id)" style="margin-bottom: 20rpx;">
          <view class="img_area">
            <image :src="imgPrex+item.url" style="width: 100%;height: 100%; border-radius: 20rpx;"></image>
          </view>
          <view class="good_name">
            <view class="good_name_img">污师优选</view>
            <view class="good_name_info">{{ item.name }}</view>
          </view>
          <view class="good_price">
            <view class="good_price_num">
              <view style="font-size:20rpx;display: inline;">¥</view>
              {{ item.nowPrice }}
            </view>
            <view class="good_price_desc">{{ item.mai }}人付款</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  </view>
  </view>
  <!--商品 结束-->
  </view>
</template>

<script>
import config from '../../utils/config.js'
import request from '../../utils/request.js'

export default {
  data() {
    return {
      goodsList: [],
      imgPrex: config.imgPrefx,
      search: '',
      goodsList: []
    }
  },
  created() {
  },
  onLoad(option) {
    console.info("页面切换时传递的信息：", option)
    this.search = option.search;
    this.queryList()
  },
  onShareAppMessage(res) {
    let pages = getCurrentPages(); //获取当前页面栈的信息
    let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '逐金污师丨成人情趣甄选好物',
        path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
      }
    },
	onShareTimeline(res) {
	  let pages = getCurrentPages(); //获取当前页面栈的信息
	  let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: '逐金污师丨成人情趣甄选好物',
	      path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
	    }
	  },
  methods: {
    serachEvt() { // 搜索
      this.queryList()
    },
    queryList() {
      let _this = this;
      request({
        url: '/app/v1/good/list',
        method: "POST",
        data: {
          name: _this.search
        },
      }).then(res => {
        if (200 == res.code) {
          // 处理数据
          for (var index in res.data) {
            const aa = res.data[index].name;
            if (aa.length >= 13) {
              res.data[index].name = aa.substring(0, 13) + '...'
            }
          }
          _this.goodsList = res.data;

        } else {
          console.error('查询文章列表失败');
        }
      })
    },
    manUse() {
      return;
      uni.navigateTo({
        url: "/pages/manuse/manuse"
      })
    },
    womanUse() {
      return;
      uni.navigateTo({
        url: "/pages/womanuse/womanuse"
      })
    },
    allUse() {
      return;
      uni.navigateTo({
        url: "/pages/alluse/alluse"
      })
    },
    fushi() {
      return;
      uni.navigateTo({
        url: "/pages/fushi/fushi"
      })
    },
    jumpDetail(id) {
      uni.navigateTo({
        url: "/pages/gdetail/gdetail?id=" + id
      })
    }
  }
}
</script>
<style>
/** 设置整个页面的背景色为白色 **/
page {
  background-color: #fff;
}

/**搜索区域**/
.search_area {
  display: flex;
  justify-content: center;
  width: 750rpx;
  height: 240rpx;
}

.kinds {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 16rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
  border-radius: 10rpx;
  background-color: white;
  width: 700rpx;
  height: 130rpx;
}

.kinds_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 130rpx;
  width: 150rpx;
  font-size: 20rpx;
}

/** 每一个商品卡 **/
.goods_item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 480rpx;
  width: 340rpx;
  margin-left: 25rpx;
  margin-top: 12rpx;
  border-radius: 20rpx;
}

/** 商品卡图片 **/
.img_area {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  background-color: #ededed;
  height: 340rpx;
  width: 340rpx;
  border-radius: 20rpx;
}

/** 商品文字区域 **/
.good_name {
  display: flex;
  align-items: start;
  margin-top: 25rpx;

}

/** 商品tag属性**/
.good_name_img {
  padding-left: 12rpx;
  margin-top: 6rpx;
  width: 160rpx;
  height: 28rpx;
  line-height: 28rpx;
  border-radius: 12rpx;
  background-color: black;
  color: white;
  font-size: 20rpx;
}

/** 商品名称属性**/
.good_name_info {
  width: 400rpx;
  font-size: 32rpx;
  font-weight: 540;
  margin-left: 10rpx;
}

/**价格区域**/
.good_price {
  display: flex;
  margin-top: 10rpx;
}

/**价格区域数字**/
.good_price_num {
  padding-left: 12rpx;
  width: 90rpx;
  height: 34rpx;
  line-height: 34rpx;
  font-size: 34rpx;
  color: red;
}

/**价格区域人数**/
.good_price_desc {
  margin-left: 200rpx;
  width: 200rpx;
  font-size: 24rpx;
  color: #aeaeae;
  margin-left: 10rpx;
}
</style>
